<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>管控</BreadcrumbItem>
      <BreadcrumbItem>集采管控</BreadcrumbItem>
      <BreadcrumbItem>集采任务</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>

    <h2 class="primary">集采任务</h2>
  </div>

  <div class="info">
    <div>
     <vxe-grid v-bind="gridOptions">
       
        <template #toolbar_buttons>
          <vxe-button style="background-color: rgb(148, 86, 53);color:aliceblue"  @click="insertEvent()"
            >录入年度集采任务</vxe-button
          >
        </template>
      
      </vxe-grid>

     
    </div>
  </div>
</template>

<script setup>

import {  reactive } from "vue";

const gridOptions = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
  
  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
    
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { field: "id", title: "序号", width: 70, align: "center" },
    { field: "name", title: "集采任务标题", width: 184 },
    { field: "prescription", title: "时间周期", width: 180 },
    { field: "diagnosis", title: "集采任务状态" },
    { field: "Department", title: "操作", width: 100, align: "center" },
    
  ],
  
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 5,
      name: "--",
      prescription: "324",
      diagnosis: "强直性脊柱炎",
      Department: "--",
      state: 30,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 6,
      name: "--",
      prescription: "329",
      diagnosis: "强直性脊柱炎",
      Department: "--",
      state: 21,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 7,
      name: "谢广坤",
      prescription: "328",
      diagnosis: "感冒引起发烧",
      Department: "中药部门",
      state: 29,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 8,
      name: "患者",
      prescription: "320",
      diagnosis: "111",
      Department: "安保部",
      state: 35,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});

</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  background-color: #ffffff;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}

.primary {
  color: #945635;
}

h2 {
  font-weight: normal;
  font-size: 20px;
}
</style>